<template>
	<el-descriptions title="" :column="2" border>
		<el-descriptions-item>
			<template #label> 用户ID </template>
			{{ data._id }}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label> 用户名 </template>
			{{ data.username }}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label> 账户余额 </template>
			{{ data.money }}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label> 账户状态 </template>
			{{ data.state ? '正常' : '异常' }}
		</el-descriptions-item>
		<el-descriptions-item :span="2">
			<template #label> 地址 </template>
			{{ data.address }}
		</el-descriptions-item>
    <el-descriptions-item>
      <template #label> 日期 </template>
      {{ formattedDate }}
    </el-descriptions-item>
		<el-descriptions-item>
			<template #label> 头像 </template>
			<img :src="GETIMAGE+data.avatar" style="width: 120px" alt="" />
		</el-descriptions-item>
	</el-descriptions>
</template>

<script lang="ts" setup>import {GETIMAGE} from '../client';
import { computed } from 'vue';

const props = defineProps<{ data: any }>();

// 定义一个计算属性来格式化日期
const formattedDate = computed(() => {
  const date = new Date(props.data.createTime);
  return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
});
</script>